<template>
  <MyDialog
    :dialog-form="dialogForm"
    :dialog-visible="dialogVisible"
    @dialogClose="onClose"
    @dialogConfirm="onSubmit"
  >
    <template #dialogBox>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" status-icon>
        <el-form-item label="原账号">
          <el-input v-model="row.userAccount" disabled />
        </el-form-item>
        <el-form-item label="新账号" prop="userAccount">
          <el-input v-model="ruleForm.userAccount" placeholder="请输入账号" />
        </el-form-item>
        <!-- <p class="tips">
          提示：修改登录账号后，用户需要使用新账号登录，密码不变
          <a @click="copy">复制账号</a>
        </p> -->
      </el-form>
    </template>
  </MyDialog>
</template>

<script setup lang="ts">
import { ref, watch, reactive, defineAsyncComponent } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { validateTel } from '/@/utils/toolsValidate'
import { updateUserAccountApi } from '/@/api/setting/structure'
const MyDialog = defineAsyncComponent(
  () => import('/@/components/dialog/index.vue')
)
const ruleFormRef = ref<FormInstance>()

// 定义父组件传过来的值
const props = defineProps({
  myDialog: {
    type: Boolean,
    default: () => false
  },
  row: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits(['flash'])

const dialogVisible = ref<boolean>(false) //弹窗是否出现
const dialogForm = reactive({
  width: '30%',
  title: '更换账号'
})
const ruleForm = reactive({
  userAccount: ''
})

const rules = reactive<FormRules>({
  userAccount: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { required: true, validator: validateTel, trigger: 'blur' }
  ]
})

watch(
  () => props.myDialog,
  () => {
    dialogVisible.value = true
  }
)

const onClose = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
  dialogVisible.value = !dialogVisible.value
}

const onSubmit = async () => {
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let param = {
        userAccount: ruleForm.userAccount,
        userId: props.row.id
      }
      let res = await updateUserAccountApi(param)
      if (res.code == 0) {
        ruleFormRef.value.resetFields()
        dialogVisible.value = !dialogVisible.value
        emit('flash')
        ElMessage.success('修改成功！')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const copy = () => {
  navigator.clipboard.writeText(ruleForm.userAccount).then(
    function () {
      /* clipboard successfully set */
      ElMessage.success('复制成功！')
    },
    function () {
      /* clipboard write failed */
      ElMessage.error('你当前浏览器不支持复制呢！')
    }
  )
}
</script>

<style scoped lang="scss">
.tips {
  margin-top: 10px;
  a {
    color: var(--el-color-primary);
    text-decoration: underline;
    cursor: pointer;
  }
}
</style>
